<template>
  <div class="container">
    <!-- 手机拖拽 -->
    <!-- <div class="canvas-box" @touchstart="startFn" @touchmove="moveFn"> -->

    <el-row :gutter="20">
      <el-col :span="12">
        <div class="canvas-box" :draggable="true" @dragstart="dragStartFn" @dragover="dragOverFn">
          <canvas :width="CW" :height="CH" ref="canvas"></canvas>
          <div
            class="mark"
            v-show="ISMAKE"
            :style="{width:MW+'px',height:MH+'px',left:ML+'px',top:MT+'px'}"
          ></div>
        </div>

        <div class="canvas-btn">
          <input type="file" accept="image/*" class="file" ref="file" @change="fileFn" />
          <el-button type="primary" @click="imgFn">选择图片</el-button>
          <el-button type="primary" @click="scaleFn(1)">放大</el-button>
          <el-button type="primary" @click="scaleFn(0)">缩小</el-button>
          <el-button type="primary" @click="saveFn">保存</el-button>
        </div>
      </el-col>
      <el-col :span="12">
        <div>图片保存显示区域</div>
        <div>
          <img :src="Image" alt />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // canvas画布大小
      CW: 500, //canvas宽
      CH: 500, //canvas高

      // 裁剪大小
      MW: 300, //裁剪宽
      MH: 300, //裁剪高
      ML: 100, //裁剪左边距离
      MT: 100, //裁剪顶部距离

      // 图片大小
      IW: 0, //图片宽
      IH: 0, //图片高
      IL: 0, //图片左边距离
      IT: 0, //图片顶部距离

      // 是否显示裁剪框
      ISMAKE: false,
      Image: ""
    };
  },

  methods: {
    // 上传变化事件
    fileFn() {
      this.ISMAKE = true;
      let file = this.$refs.file.files[0];
      if (!file) {
        return;
      }
      // 读取文件把上传文件转为base64
      let fileExample = new FileReader();
      //转化
      fileExample.readAsDataURL(file);
      // 转化完成
      fileExample.onload = ev => {
        // 创建一个新图片
        this.IMAGE = new Image();
        this.IMAGE.src = ev.target.result;
        this.IMAGE.onload = () => {
          this.IW = this.IMAGE.width;
          this.IH = this.IMAGE.height;

          // 重新计算宽高
          let n = 1; //默认比例为1:1

          // 设置图片宽高比列
          // 如果宽比高大就按宽的比例来算 否则用高算
          if (this.IW > this.IH) {
            n = this.IW / this.CW; //获取宽度比例
            this.IW = this.CW;
            this.IH = this.IH / n;
          } else {
            n = this.IH / this.CH; //获取高度比例
            this.IH = this.CH;
            this.IW = this.IW / n;
          }
          this.IL = (this.CW - this.IW) / 2;
          this.IT = (this.CH - this.IH) / 2;
          this.drawImage();
        };
      };
    },
    // 点击上传
    imgFn() {
      this.$refs.file.click();
    },
    // 放大缩小
    scaleFn(flge) {
      // 没图片就是返回
      if (!this.IMAGE) {
        return;
      }
      let n = this.IW / this.IH; //算出比例
      let n1 = 20; //固定增加宽度
      let n2 = n1 / n; //算出百分比高度
      if (flge) {
        // 每次放大+20px
        this.IW += n1;
        this.IH += n2;
      } else {
        // 每次缩小-20px
        this.IW -= n1;
        this.IH -= n2;
      }
      this.drawImage(); //绘制
    },
    // 拖拽文件
    dragStartFn(ev) {
      console.log(ev);
      // 没图片就是返回
      if (!this.IMAGE) {
        return;
      }
      // 鼠标开始位置
      this.startX = ev.clientX;
      this.startY = ev.clientY;
    },
    dragOverFn(ev) {
      // 没图片就是返回
      if (!this.IMAGE) {
        return;
      }
      // 鼠标移动位置
      this.changeX = ev.clientX - this.startX;
      this.changeY = ev.clientY - this.startY;
      // 偏移超过10px才算拖拽
      if (Math.abs(this.changeX) > 10 || Math.abs(this.changeY) > 10) {
        this.IL += this.changeX;
        this.IT += this.changeY;
        this.drawImage(); //绘制
        this.startX = ev.clientX;
        this.startY = ev.clientY;
      }
    },
    // 保存
    saveFn() {
      // 没图片就是返回
      if (!this.IMAGE) {
        return;
      }
      //获取指定区域的像素点  x轴,y轴,mark框宽度,mark框高度
      let imageData = this.CTX.getImageData(this.ML, this.MT, this.MW, this.MH);
      // 创建一个新的canvas
      let canvas2 = document.createElement("canvas");
      // 创建第二个canvas画布
      this.canvas2CTX = canvas2.getContext("2d");
      canvas2.width = this.MW;
      canvas2.height = this.MH;
      // 把像素点放入到画布中
      // 参数 像素点,初始点坐标 0,0  最终点坐标 0,0,  绘制的宽this.MW 绘制的高this.MH
      this.canvas2CTX.putImageData(imageData, 0, 0, 0, 0, this.MW, this.MH);
      // 转化成图片
      // 生成的base64
      console.log(canvas2.toDataURL("image/png"));
      this.Image = canvas2.toDataURL("image/png");
    },
    drawImage() {
      // 创建2D画布
      this.CTX = this.$refs.canvas.getContext("2d");
      // 清空画布
      this.CTX.clearRect(0, 0, this.CW, this.CH); //清空画布的位置 x轴，y轴，x宽，x宽
      // 绘制图片
      this.CTX.drawImage(this.IMAGE, this.IL, this.IT, this.IW, this.IH); //绘制的图片 x轴位置，y轴位置，x宽，x宽
    }

    // 手机 拖拽文件
    // startFn(ev){
    //   // 没图片就是返回
    //   if(!this.IMAGE){
    //     return
    //   }
    //   let point = ev.changedTouches[0];
    //   // 鼠标开始位置
    //   this.startX = point.clientX;
    //   this.startY = point.clientY;
    // },
    // moveFn(ev){
    //   // 没图片就是返回
    //   if(!this.IMAGE){
    //     return
    //   }
    //   let point = ev.changedTouches[0];
    //   // 鼠标移动位置
    //   this.changeX = point.clientX - this.startX;
    //   this.changeY = point.clientY - this.startY;
    //   // 偏移超过10px才算拖拽
    //   if(Math.abs(this.changeX)>10 || Math.abs(this.changeY)>10 ){
    //     this.IL += this.changeX;
    //     this.IT += this.changeY;
    //     this.drawImage();//绘制
    //     this.startX = point.clientX;
    //     this.startY = point.clientY;
    //   }
    // },
  },

  mounted: function() {},
  updated: function() {}
};
</script>

<style scoped lang="scss">
.canvas-box {
  position: relative;
  border: 1px solid #d7d7d7;
  width: 502px;
  .mark {
    position: absolute;
    z-index: 20;
    border: 1px dashed #d7d7d7;
  }
}
.canvas-btn {
  padding: 20px 0;
  .file {
    display: none;
  }
}
</style>
